import Icon from '@ant-design/icons';
import classNames from 'classnames';
import { CheckedIcon } from 'icons';

interface Props {
    checked: boolean;
    onChange?: (checked: boolean) => void;
}
export default function CorrectRadio(props: Props): JSX.Element {
    const { checked, onChange } = props;

    const textClassName = classNames({
        'text-base': true,
        'text-#165DFF': !checked,
        'text-#00B42A': checked,
    });

    const readonly = !onChange;

    const wrapperClassName = classNames({
        'flex items-center gap-2 cursor-pointer transition-all duration-75': true,
        'opacity-50': readonly,
    });
    return (
        <div className={wrapperClassName} onClick={() => onChange && onChange(!checked)}>
            {!checked && <div className='w-20px h-20px rounded-full' style={{ border: '2px solid #165DFF' }} />}
            {checked && <Icon component={CheckedIcon} />}
            <div className={textClassName}>标注正确</div>
        </div>
    );
}
